<template>
<div class="edit-head">
    <div class="head">
        <el-dropdown-item @click.native="formVisible = true">修改头像</el-dropdown-item>
        <el-dialog title="修改头像" width="20%" :append-to-body="true" :visible.sync="formVisible">
            <el-form>
                <el-form-item>
                    <Avatar @click="getImgUrl" :headUrl="avatarUrl"></Avatar>
                </el-form-item>
                <el-form-item>
                   
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
</template>

<script>
import {
    trimArray
} from '@/library'
export default {
    name: "editHead",
    props: {
        form: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            formVisible: false,
            value: "",
            disabled: false,
            formLabelWidth: "120px",
            imageUrl: require("@/assets/head.jpeg"),
        };
    },
    computed: {
        avatarUrl() {
            let url = this.imageUrl;
            if (typeof this.form.userHeadImgs != 'undefined' && this.form.userHeadImgs instanceof Array) {
                url = this.form.userHeadImgs[0].imgUrl
            }
            return url
        },
    },
    methods: {
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        getImgUrl(res) {
            console.log(res);
            let id = trimArray(res)
            this.$axios.post('rbac/sysuser/updateCurrentHead', {
                params: {
                    headImg: id
                }
            }).then((res) => {
                console.log(res)
                this.$emit('on-head-success', res)
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.edit-head {
    display: inline;

    .head {
        width: 200px;
    }
}
</style>
